<!--本组件是对businesscomponents/search的改造，向下兼容，使用了省市区级联-->
<template>
  <div class="custom-search-form">
    <el-form
      :inline="true"
      :model="formInline"
      :label-width="labelWidthStr"
      :label-position="labelPosition"
      class="el-form--inline filter-box">
      <el-form-item
        v-for="item in searchData"
        :key="item.index"
        :label="item.title"
        :class="{'badge':item.type==='badge'}"
      >

        <div v-if="item.type === 'input'">
          <el-input
            v-model="formInline[item.key]"
            v-bind="item.attr"/>
        </div>

        <div v-if="item.type === 'province'">
          <el-select
            v-model="formInline[item.key]"
            v-bind="item.attr"
            :remote-method="remoteMethod"
            @change="changeProvince(item,formInline[item.key])"
            @focus="focuskey(item.key)">
            <el-option
              v-for="items in provinceData"
              :title="items.label"
              :key="items.value"
              :label="items.label"
              :value="items.value"/>
          </el-select>
        </div>

        <div v-if="item.type === 'city'">
          <el-select
            v-model="formInline[item.key]"
            v-bind="item.attr"
            :remote-method="remoteMethod"
            @change="changeCity(item,formInline[item.key])"
            @focus="focuskey(item.key)">
            <el-option
              v-for="items in cityData"
              :title="items.label"
              :key="items.value"
              :label="items.label"
              :value="items.value"/>
          </el-select>
        </div>

        <div v-if="item.type === 'countyId'">
          <el-select
            v-model="formInline[item.key]"
            v-bind="item.attr"
            :remote-method="remoteMethod"
            @focus="focuskey(item.key)">
            <el-option
              v-for="items in countyData"
              :title="items.label"
              :key="items.value"
              :label="items.label"
              :value="items.value"/>
          </el-select>
        </div>

        <div v-if="item.type === 'select'">
          <el-select
            v-model="formInline[item.key]"
            v-bind="item.attr"
            :remote-method="remoteMethod"
            @focus="focuskey(item.key)">
            <el-option
              v-for="items in item.options"
              :title="items.label"
              :key="items.value"
              :label="items.label"
              :value="items.value"/>
          </el-select>
        </div>

        <div v-if="item.type === 'romote'">
          <el-select
            v-model="formInline[item.key]"
            filterable
            remote
            clearable
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod">
            <el-option
              v-for="items in item.options"
              :title="items.label"
              :key="items.value"
              :label="items.label"
              :value="items.value"/>
          </el-select>
        </div>

        <div v-if="item.type === 'radio'">
          <template>
            <el-radio
              v-for="items in item.options"
              :key="items.value"
              v-model="formInline[item.key]"
              :label="items.value"
              v-bind="item.attr"
            >{{ items.label }}</el-radio>
          </template>
        </div>

        <div v-if="item.type === 'badge'">
          <template>
            <el-badge
              v-for="(items,i) in item.options"
              :key="i"
              :class="{'badge-active':badgeKey===items.value}"
            >
              <el-button
                class="badge-button"
                @click="changeStatus(item.key,items.value)"
                size="small">
                {{ items.label }}
              </el-button>
            </el-badge>
          </template>
        </div>

        <div v-if="item.type === 'cascader'">
          <el-cascader
            v-model="formInline[item.key]"
            :options="item.options"
            v-bind="item.attr"
            :props="item.optionProps"/>
        </div>

      </el-form-item>

      <el-form-item class="searchButtonList">
        <el-button
          class="reset"
          @click.stop="reset">
          <i class="el-icon-refresh-right"/>
          重置</el-button>
        <el-button
          class="submit"
          type="primary"
          @click.stop="search"
          :class="{'isAddWidth':submitLoading}"
          :loading="submitLoading"
        >
          <i
            class="el-icon-search"
            :class="{'isdisplay':submitLoading}" />
          {{ submitLoading?'':'查询' }}</el-button>

      </el-form-item>
    </el-form>
    <div
      class="collapse-button-wrapper"
      v-if="showCollapse"
    >
      <el-button
        type="text"
        @click="collapse=!collapse"
      >
        <span v-if="collapse">展开详细查询 <i class="el-icon-arrow-down" /></span>
        <span v-else>收起详细查询 <i class="el-icon-arrow-up" /></span>
      </el-button>
    </div>
  </div>
</template>

<script>
import { formatDate } from '../../const/filter'
import { isObject } from 'lodash'
import { pca, pcaa } from 'area-data'
import {
  channelBusinessGetAreaList
} from '../../const/authCenterApi'
export default {
  name: 'Search',
  props: {
    submitLoading: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: () => []
    },
    // 自定义label-width长度
    labelWidth: {
      type: String,
      default: () => ''
    },
    labelPosition: {
      type: String,
      default: 'right'
    },
    showCollapse: {
      type: Boolean,
      default: false
    },
    compactData: { // 收起搜索时的选项
      type: Array,
      default: () => []
    }
  },
  data () {
    // 获取字段，设置默认为空
    let item = this.data
    let formInlineBox = {}
    // 用于badge 默认值
    let badgeKey = null
    item.forEach(item => {
      if (item.key === 'certificateId') {
        item.key = 'registNo'
      }
      // 如果有默认值
      if (item.value) {
        formInlineBox[item.key] = item.value
        // 用于tab默认值
        if (item.type === 'badge') {
          badgeKey = item.value
        }
      } else {
        if (item.type === 'badge') {
          badgeKey = ''
        } else if (item.type === 'cascader') {
          formInlineBox[item.key] = []
        } else {
          formInlineBox[item.key] = null
        }
      }
    })
    return {
      // 自定义表头长度
      labelWidthStr: this.labelWidth || '100px',
      // 内容数据
      formInline: {
        ...formInlineBox
      },
      // 用于badge
      badgeKey,
      collapse: true,
      provinceData: [],
      cityData: [],
      countyData: []
    }
  },
  computed: {
    searchData () {
      return this.showCollapse && this.collapse ? this.compactData : this.data
    }
  },
  mounted () {
    this.getAreaList('all')
  },
  methods: {
    // 状态tab切换
    changeStatus (key, value) {
      this.formInline[key] = value
      this.badgeKey = value
      // 点击tab切换的时候直接查询列表
      this.search()
    },
    // 用于保存select为搜索下拉时使用
    focuskey (key) {
      this.selectkey = key
      this.$emit('focuskey', this.selectkey)
    },
    // 获取省市区列表
    getAreaList (type, params) {
      this.$axios
        .get(channelBusinessGetAreaList, { params: params })
        .then(({ data }) => {
          let arr = []
          Object.keys(data.payload).map(item => {
            let obj = {
              label: data.payload[item],
              value: item
            }
            arr.push(obj)
          })
          if (type === 'all') {
            this.provinceData = arr
          } else if (type === 'province') {
            this.cityData = arr
          } else if (type === 'city') {
            this.countyData = arr
          }
        })
        .catch(e => {})
        .finally(() => {})
    },
    // 省变化时使用
    changeProvince (item, provinceId) {
      this.cityData = []
      this.countyData = []
      this.formInline.cityId = ''
      this.formInline.countyId = ''
      this.getAreaList('province', { provinceCode: provinceId })
    },
    // 城市变化时使用
    changeCity (item, cityId) {
      this.countyData = []
      this.getAreaList('city', { cityCode: cityId })
      this.formInline.countyId = ''
    },
    // 搜索下拉框返回值
    remoteMethod (query) {
      this.$emit('remoteMethod', query, this.selectkey)
    },
    // 点击搜索
    search () {
      // 表单数据
      let formData = {
        ...this.formInline
      }
      // 时间处理  为了点击提交不需要转换时间
      // 这里做了一个处理 在外层需要添加fieldname字段
      // fieldname为数组 必须两个值['开始时间字段',结束时间字段]
      this.searchData.forEach(item => {
        // 对多类目处理-只返回一个ID
        if (item.type === 'cascader') {
          if (formData[item.key]) {
            if (isObject(formData[item.key])) {
              let index = formData[item.key].length
              if (index > 0) {
                formData[item.key] = formData[item.key][index - 1] + ''
              } else {
                formData[item.key] = null
              }
            }
          } else {
            formData[item.key] = null
          }
        }
      })
      this.$emit('searchForm', formData)
    },
    // 点击重置
    reset () {
      let arr = this.searchData
      let DefaultFormInlineBox = {}
      // 用于badge 默认值
      let badgeKey = null
      arr.forEach(item => {
        // 如果有默认值
        if (item.value) {
          DefaultFormInlineBox[item.key] = item.value
          // 用于tab默认值
          if (item.type === 'badge') {
            badgeKey = item.value
          }
        } else {
          DefaultFormInlineBox[item.key] = null
        }
      })
      this.formInline = DefaultFormInlineBox
      this.$emit('resetForm', this.formInline)
    }
  }
}
</script>

<style lang="less">
  .custom-search-form {
    display: flex;

    .collapse-button-wrapper {
      flex: 0 0 120px;
    }

    .filter-box {
      flex: 1;

      .badge {
        display: block;
      }

      .daterange {
        width: 538px !important;
      }

      .el-badge {
        margin-right: 14px;
        line-height: 20px;
      }

      .badge-button {
        border: 0 !important;
        border-radius: 14px;
      }

      .el-input__inner {
        width: 211px;
      }

      .badge-active {
        .badge-button {
          background: #2371c5;
          color: #fff;
        }
      }

      .el-form-item {
        margin-bottom: 10px;
      }

      .el-form-item__label {
        padding-right: 10px;
      }
    }

    // .searchButtonList{
    //   float:right;
    // }

    .el-range-editor--medium .el-range-separator {
      line-height: 21px;
    }

    .el-range-editor--medium .el-range__icon,
    .el-range-editor--medium .el-range__close-icon {
      line-height: 21px;
    }
  }
</style>
